const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function(env,argv){
  return {
    entry: path.resolve(__dirname,'develop/main.ts'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]/index.js',
        publicPath: '',
    }, 
    devServer: {
      contentBase: path.join(__dirname, "develop"),
      compress: false,
      clientLogLevel:'none',
      quiet : true,
      port: 9002,
      hot: true
    },
    //devtool: 'source-map',
    module: {
      rules: [{
        test: /\.tsx?|js$/,
        loader: "ts-loader",
        exclude: /node_modules/
      },{
        test: /\.css|less$/,
        exclude: /node_modules/,
        use:[
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/',
            }
          },
          {loader: 'css-loader'},
          {loader: 'less-loader'}
        ]
      },{
        test: /\.(png|jpg|gif|svg|jpeg)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },{//当使用html-loader时没法使用ejs语法；不使用时图片必须要require
        test: /\.(html)$/,
        use: [
          {
            loader: 'html-loader',
          }
        ]
      }]
    },
    plugins:[
      new MiniCssExtractPlugin({
        filename:`[name]/index.css`
      }),
      new HtmlWebpackPlugin({
        filename: 'index.html',      //生成的html存放路径，相对于 path
        template: path.resolve(__dirname,'develop/index.html'),
        minify:{
            romoveComments:true,        //移除HTML中的注释
        },
        inject: true//插入js
      })
    ],
    resolve:{
      extensions: ['.ts', '.tsx', '.json', '.js'],
      alias: {
        "@/src": path.resolve(__dirname,'src'),
        "@/dev": path.resolve(__dirname,'develop')
      }
    }
  }
};